import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet, Text, View, Image, ImageBackground,
  TextInput, ScrollView, Button, TouchableOpacity,
  FlatList, Modal, ToastAndroid, BackHandler
} from 'react-native';
import react, { useState, useEffect } from 'react';



const Bg = (props) => {
  return (
    <View style={props.style}>
      <Image
        source={props.source}
        resizeMode={props.resizeMethod}
        style={{ position: 'absolute', left: 10, top: 10, width: '100%', height: '100%' }}
      />
      {props.children}
    </View>
  )
}
let page = 1;
let now = 0;
export default function App() {
  const [topics, setTopics] = useState([])
  const [refresh, setRefresh] = useState(false)
  const [show, setShow] = useState(false)
  const getTopics = (page) => {
    fetch('https://cnodejs.org/api/v1/topics?page=' + page)
      .then(res => res.json())
      .then(res => {
        setTopics([...topics, ...res.data]);
      })
  }
  useEffect(() => {
    getTopics(1)
    // 监听一次的执行一次只要放到最开始执行一次即可，组件卸载时监听就要关掉（定时器一样）
    BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        if (Date.now() - now > 2000) {
          now = Date.now();
          ToastAndroid.show('确定要退出吗？', ToastAndroid.SHORT)
          return true;
          // BackHandler.exitApp()
          // return 的是true就不会退出，false或者后面的exitApp就会默认退出
        } else {
          BackHandler.exitApp()
        }
      }
    )

  }, [])
  return (
    <View style={styles.container}>
      <Button
        title='显示Modal'
        onPress={() => { setShow(true) }}
      />
      <Button
        title='显示Modal'
        onPress={() => { setShow(true) }}
      />
      <Text>lffffffffffffffffffffffff</Text>
      <Modal
        animationType="slide"
        transparent={false}
        visible={show}
        // 点击硬件返回按钮时会触发这个函数
        onRequestClose={() => {
          console.log('click')
          setShow(!show);
        }}
      >
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <Button
            title='隐藏Modal'
            onPress={() => { setShow(false) }}
          />
        </View>
      </Modal>



      {/* Flatlist本身可以滚动外面就不用要ScrowView了 */}
      {/* <FlatList
        data={topics}
        renderItem={({ item }) => <Text style={styles.text}>{item.title}</Text>}
        keyExtractor={item => item.id}
        onRefresh={() => {
          setRefresh(true);
          setTimeout(() => {
            setRefresh(false)
          }, 2000)
          console.log(123);
        }}
        refreshing={refresh}
        onEndReached={() => {
          page++;
          getTopics(page);
          console.log(page);
        }}
      /> */}
      {/* <Bg
        style={{ width: 300, height: 300 }}
        source={require('./assets/1000608.jpg')}
        resizeMethod='contain'
      >
        <Text style={styles.font}>自定义背景组件</Text>
        <Text style={styles.font}>自定义背景组件</Text>
      </Bg>
      <ImageBackground
        style={{ width: 300, height: 300 }}
        source={require('./assets/11.jpg')}
      >
        <Text style={styles.font}>Inside</Text>
      </ImageBackground>
      <StatusBar style="auto" /> */}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {

  },
  text: {
    fontSize: 15,
    marginTop: 15
  },
  font: {
    color: '#fca',
    fontSize: 32
  }
});
